<template>
  <div>
    <div class="input_field" @click="registerSearch">目标查询(下拉重置)</div>
    <van-row class="thead_title">
      <van-col span="6">游戏账号</van-col>
      <van-col span="7">注册时间</van-col>
      <van-col span="7">近期登陆</van-col>
      <van-col span="4">设备</van-col>
    </van-row>
    <van-row
      class="tbody_title"
      v-for="(item, index) in list"
      :key="index"
      @click="registerClick(index)"
    >
      <van-col span="6" class="tbody_title_item">
        <span style="color: #262626">{{ item.username }}</span>
        <span>{{ item.tgid }}</span>
      </van-col>
      <van-col span="7" class="tbody_title_item" style="color: #ff0000">
        <span>{{ item.regtime | fnDate }}</span>
        <span>{{ item.regtime | fnTimeDate }}</span>
      </van-col>
      <van-col span="7" class="tbody_title_item">
        <span>{{ item.logintime | fnDate }}</span>
        <span>{{ item.logintime | fnTimeDate }}</span>
      </van-col>
      <van-col span="4" class="tbody_title_item">
        <span style="color: #0c0c0c; line-height: 88px">
          {{ item.device_from }}
        </span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import jutils from "jutils-src";
export default {
  props: {
    list: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      header: ["游戏账号", "注册时间", "近期登陆", "设备"],
      begintime: "",
      endtime: "",
    };
  },

  methods: {
    registerClick(index) {
      this.$emit("register-click", index);
    },
    registerSearch() {
      this.$emit("register-search");
    },
  },
  filters: {
    fnDate: function (date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date * 1000), "YYYY-MM-DD");
    },
    fnTimeDate: function (date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date * 1000), "HH:ii:ss");
    },
  },
};
</script>

<style scoped>
.input_field {
  position: relative;
  width: 670px;
  height: 64px;
  margin: 20px 40px;
  border-radius: 32px;
  font-weight: 500;
  border: 1px solid #c3c3c3;
  color: #888;
  font-size: 24px;
  line-height: 64px;
  padding: 0;
  text-indent: 100px;
}

.input_field::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 30px;
  width: 30px;
  height: 30px;
  background: url("../../../assets/img/page/ic_data_search.png") no-repeat;
  background-size: 100%;
}

table {
  width: 750px;
  font-size: 24px;
}

.thead_title {
  height: 70px;
  background: #e6e6e6;
  text-align: center;
  line-height: 70px;
  font-size: 24px;
  color: #545454;
  font-weight: 450;
}

.tbody_title {
  height: 128px;
  font-size: 20px;
  color: #828282;
}

.tbody_title:nth-child(2n - 1) {
  background: #f5f5f5;
}

.tbody_title_item {
  padding: 20px 0;
  text-align: center;
  line-height: 44px;
}

.tbody_title_item span {
  display: block;
}
</style>